import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile';

export default class RoutationChart extends Component {
    state = {
      carouselList: [],
    }
    componentDidMount() {
  
      this.setState({
        carouselList:this.props.data
      },function(){
          console.log(this.props.carouselList);
      })
    }
    render() {
      return (
        !this.state.carouselList.length ? <div className="HomeCarouselWarp"></div>:(<WingBlank>
          <Carousel
            autoplay={true}
            infinite
            dotStyle={{
              width: ' 0.2rem',
              height: ' 0.03rem',
              background: ' #fff',
              opacity: ' .4',
              borderRadius: ' 0'
            }}
            dotActiveStyle={{
              width: ' 0.2rem',
              height: ' 0.03rem',
              background: ' #fff',
              opacity: '1',
              borderRadius: ' 0'
            }}
          >
            {this.state.carouselList.map(val => (
              <a
                key={val}
                href={val.targetUrl}
                style={{ display: 'inline-block', width: '100%', height: '1.8rem' }}
              >
                <img
                  src={val.picUrl}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>)
      )
    }
  }